import React,{
    useState,useEffect
} from 'react'


import Childrentabs from './Sontabs'  //子组件
import axios from 'axios'

import { Tabs } from 'antd';
const { TabPane } = Tabs;

 
function Mytabs() {

   
    const [data,setData] = useState([])
    const [childrenData,setChildrenData] = useState([])

    const onChange = (key) => {
        console.log(key);
        setChildrenData(data[key].children)
    };

    useEffect( () => {
        axios.get('/api/list').then(res => {
           
            setData(res.data.list)
            setChildrenData(res.data.list[0].children)
        })

    },[])

  return (
    <div>

        <Tabs defaultActiveKey="0" onChange={onChange}>

            {
                data && data.map((item,index) => (
                    <TabPane tab={item.title} key={index}>

                        <Childrentabs childrenData={childrenData}></Childrentabs>
                            
                    </TabPane>
                ))
            }
           
         
        </Tabs>
       
   


    </div>
  )
}

export default Mytabs